<!-- <style>
tr.selected{
 background-color: #010101;
}
</style> -->
<div class="dataTables-query row">
	<div class="col-md-8">
	</div>
	<div class="col-md-4">
		<div class="pull-right">
			<a class="btn btn-primary ajax" href="/user/add"><i class="fa fa-plus"></i> 新建</a>
			<a class="btn btn-success" href="/user/edit"><i class="fa fa-edit"></i> 修改</a>
			<a class="btn btn-danger" href="/user/delete"><i class="fa fa-trash-alt"></i> 删除</a>
		</div>
	</div>
</div>

<table id="example" class="table table-bordered" style="width: 100%">
	<!-- table-striped  -->
	<thead>
		<tr>
			<th>ID</th>
			<th>帐号</th>
			<th>IP地址</th>
			<th>创建时间</th>
			<th>创建人</th>
		</tr>
	</thead>
	<tbody>
	<%for(var item in users){%>
		<tr>
			<td>${item.id}</td>
			<td>${item.account}</td>
			<td>${item.ip}</td>
			<td>${item.create_at}</td>
			<td>${item.create_by}</td>
		</tr>
	<%}%>
	</tbody>
</table>

<script>
	$(document).ready(function() {
		require(['dataTables','components/notice/notice.min'], function(table, notice) {
			table(function() {
				var dt = $('#example').DataTable({
					"scrollY" : "100%",
					"columnDefs": [
			            {
			                "targets": [ 0 ],
			                "visible": false,
			                "searchable": false
			            }
			        ]
				//"scrollCollapse" : true,
				});
				
				$('#example tbody').on( 'click', 'tr', function () {
			        if ( $(this).hasClass('selected') ) {
			            $(this).removeClass('selected');
			        } else {
			            dt.$('tr.selected').removeClass('selected');
			            $(this).addClass('selected');
			        }
			    });
				
				$('.dataTables_query .dataTables-query').on('click', '.btn-success,.btn-danger', function(e){
					e.preventDefault();
					var href = $(this).attr('href');
					//var href = $(this).attr('href');
                    if(!href || href === '#'){return}
                    var row = dt.row('.selected');
                    
                    if(row.length === 0){
                    	notice({
                            'title': '请选择一项记录再进行操作',
                            //'desc': '没有选择',
                            'color': 'primary',
                            'delay': 2000
                        })
                        return;
                    }
                    
                    //console.log(row, row.length, row.data())
                    $.post(href,{id: row.data()[0]}, function (res) {
                        // console.log(res)
                        $('#content').html(res)
                    })
				})
			})
		})
		
	});
</script>